<template>
  <div>

    <template v-if="isAdmin">

      <div class="filter-box">

        <div style="display: flex;justify-content: space-around;margin-top: 30px;font-size: 14px;">
          <div class="" style="display: flex;align-items: center">
            <div>手机号</div>
            <div class="tabSearch" style="display: flex;">
              <el-input
                v-model="phoneNumber"
                style="margin: 0 10px ;"
                placeholder="请输入手机号"
                @input="phoneNum"
              />
            </div>
          </div>

        </div>

        <div style="display: flex;justify-content: space-around;margin-top: 30px;font-size: 14px;">
          <div class="" style="display: flex;align-items: center">
            <div style="margin-right: 10px">应用 </div>
            <el-select v-model="appname" placeholder="请选择" @change="phoneNum">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>

        </div>

        <div style="display: flex;justify-content: space-around;margin-top: 30px;font-size: 14px;">
          <div class="" style="display: flex;align-items: center">
            <div style="margin-right: 10px">品牌 </div>
            <el-select v-model="brand" placeholder="请选择" @change="phoneNum">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>

        </div>

        <div style="display: flex;justify-content: space-around;margin-top: 30px;font-size: 14px;">
          <div class="" style="display: flex;align-items: center">
            <div>搜索</div>
            <div class="tabSearch" style="display: flex;">
              <el-input
                v-model="search"
                style="margin: 0 10px ;"
                placeholder="搜索 （手机，昵称，备注）"
                @input="phoneNum"
              />
            </div>
          </div>

        </div>

        <div style="display: flex;justify-content: space-around;margin-top: 30px;font-size: 14px;">
          <div class="" style="display: flex;align-items: center">
            <div style="margin-right: 10px">是否加好友 </div>
            <el-select v-model="if_friend" placeholder="请选择" @change="phoneNum">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>

        </div>

        <div style="display: flex;justify-content: space-around;margin-top: 30px;font-size: 14px;">
          <el-button type="primary" @click="resetFilter">重置</el-button>
        </div>

      </div>

      <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="id" label="id" align="center" />
        <el-table-column prop="mobile" label="手机号" align="center" />
        <el-table-column prop="appname" label="app来源" align="center" />
        <el-table-column prop="remark" label="备注" align="center" />
        <!-- <el-table-column prop="wx" label="微信号" align="center">
            </el-table-column> -->
        <el-table-column prop="vip_text" label="是否是会员" align="center" />
        <el-table-column prop="score" label="账号余额" align="center" />
        <!-- <el-table-column prop="isType" label="是否是会员" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.isType == 1">
                        <div class="status-icon"></div>是
                    </span>
                    <span v-if="scope.row.isType == 2">
                        <div class="status-icon"></div>否
                    </span>
                </template>
</el-table-column> -->
        <el-table-column prop="vip_week_end_time" label="周卡到期时间" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.vip_week_end_time == null">
              <div class="status-icon" />--
            </span>
            <span v-else>
              <div class="status-icon" />{{ scope.row.vip_week_end_time }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="vip_month_end_time" label="月卡到期时间" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.vip_month_end_time == null">
              <div class="status-icon" />--
            </span>
            <span v-else>
              <div class="status-icon" />{{ scope.row.vip_month_end_time }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="vip_quarter_end_time" label="季卡到期时间" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.vip_quarter_end_time == null">
              <div class="status-icon" />--
            </span>
            <span v-else>
              <div class="status-icon" />{{ scope.row.vip_quarter_end_time }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="vip_year_end_time" label="年卡到期时间" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.vip_year_end_time == null">
              <div class="status-icon" />--
            </span>
            <span v-else>
              <div class="status-icon" />{{ scope.row.vip_year_end_time }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="注册时间" align="center" />
        <el-table-column prop="platform" label="注册来源" align="center" />
        <el-table-column prop="os" label="注册系统" align="center" />
        <el-table-column prop="brand" label="注册品牌" align="center" />
        <el-table-column label="是否拉黑" align="center">
          <template #default="{ row }">
            <div
              style="display: flex;flex-direction: column;justify-content: center;align-items: center;width:100px;"
            >
              <el-radio-group v-model="row.if_block" @change="handleRadioChange(row)">
                <el-radio :label="1">否</el-radio>
                <el-radio :label="2">是</el-radio>
              </el-radio-group>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否加好友" align="center">
          <template #default="{ row }">
            <div
              style="display: flex;flex-direction: column;justify-content: center;align-items: center;width:100px;"
            >
              <el-radio-group v-model="row.if_friend" @change="handlefriendChange(row)">
                <el-radio :label="'0'">否</el-radio>
                <el-radio :label="'1'">是</el-radio>
              </el-radio-group>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div
              style="display: flex;flex-direction: column;justify-content: center;align-items: center;width:100px;"
            >
              <el-button
                size="small"
                type="danger"
                style="width: 100px;margin-bottom: 10px;"
                @click="handleButton1Click(scope.row.mobile)"
              >赠送球钻</el-button>
              <el-button
                size="small"
                type="primary"
                style="width: 100px;margin-left: 0 !important;"
                @click="notesClick(scope.row.mobile)"
              >设置备注</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
          <span style="margin-bottom: 30px;display: inline-block;">为 {{ userPhone }} 充值球钻</span>
          <el-input v-model="money" placeholder="请输入球钻数量" />
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancellation">取 消</el-button>
            <el-button type="primary" @click="determine">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog title="提示" :visible.sync="dialogVisibleNotes" width="30%" :before-close="handleCloseNotes">
          <span style="margin-bottom: 30px;display: inline-block;">为 {{ userPhoneNotes }} 添加备注</span>
          <el-input v-model="notes" placeholder="请输入备注" />
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancellationNotes">取 消</el-button>
            <el-button type="primary" @click="determineNotes">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <div class="tabListPage">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="PageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

    </template>

    <template v-else>
      <div class="mian-box">
        您好，欢迎使用后台管理系统
      </div>
    </template>

  </div>
</template>

<script>
import { VueQuillEditor } from 'vue-quill-editor'
import { userList, sendUserMoney, giveUsernotes, getBlock, saveFriend, brandList } from '../../../libs/api'
export default {
  name: 'Dashboard',
  data() {
    return {
      dialogManagementVisible: false,
      dialogVisibleNotes: false,
      notes: '',
      rules: {
        // name: [
        //     { required: true, message: '请输入名称', trigger: 'blur' },
        // ],
      },
      ruleForm: {},
      values: '',
      value: '',
      input: '',
      sortCard: '',
      content: '',
      dialogImageUrl: '',
      dialogTableVisible: false,
      dialogVisible: false,
      // 总数据
      tableData: [],
      currentPage: 1,
      PageSize: 10,
      fileList: [],

      allOodData: [],
      currentPage: 1,
      totalCount: 1,
      PageSize: 10,
      pageSizes: [5, 10],
      alltabData: [],
      orderTime: '',
      phoneNumber: '',
      appname: '',
      if_friend: '',
      userPhone: '',
      search: '',
      money: '',
      userPhoneNotes: '',
      isAdmin: false,
      if_block: 1,
      brand: '',
      options1: [
        {
          label: '星球客',
          value: 'xqk'
        },
        {
          label: '有球体育',
          value: 'yqty'
        },
        {
          label: '310大师安卓',
          value: '310Android'
        },
        {
          label: '310大师苹果',
          value: '310'
        }
      ],
      options2: [
        {
          label: '是',
          value: '1'
        },
        {
          label: '否',
          value: '0'
        }
      ],
      options3: [

      ]

    }
  },
  created() {
    this.initOption3()
    const roles = JSON.parse(localStorage.getItem('roles'))
    if (roles == 1 || roles == 7) {
      this.getUserList()
      this.isAdmin = true
    } else {
      this.$router.push('/hqinformation/index')
    }
  },
  methods: {
    async initOption3() {
      const res = await brandList()
      this.options3 = res.data.map((item, index) => {
        return {
          label: item,
          value: item
        }
      })
    },
    handlefriendChange(e) {
      saveFriend({
        id: e.id
      }).then(res => {
        console.log(res)
      })
    },
    handleRadioChange(e) {
      getBlock({
        id: e.id
      }).then(res => {
        console.log(res)
      })
    },
    determineNotes() {
      if (this.notes == '') {
        this.$message({
          type: 'error',
          message: '备注不能为空!'
        })
        return
      }
      this.dialogVisibleNotes = false
      giveUsernotes({
        mobile: this.userPhoneNotes,
        remark: this.notes
      }).then(res => {
        this.getUserList()
        console.log(res)
      })
    },
    phoneNum() {
      this.currentPage = 1
      this.getUserList()
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val
      this.getUserList()
    },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val
      // 点击每页显示的条数时，显示第一页
      console.log(val)
      this.PageSize = val
      // 改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1
      this.getUserList()
    },
    resetFilter() {
      this.currentPage = 1
      this.phoneNumber = ''
      this.if_friend = ''
      this.appname = ''
      this.search = ''
      this.brand = ''
      this.getUserList()
    },
    // 获取用户列表
    getUserList() {
      userList({
        page: this.currentPage,
        limit: this.PageSize,
        mobile: this.phoneNumber,
        if_friend: this.if_friend,
        appname: this.appname,
        search: this.search,
        brand: this.brand
      }).then(res => {
        console.log(res)
        this.tableData = res.data.list
        this.alltabData = res.data.list
        this.totalCount = res.data.total
      })
    },
    // 删除会员卡
    deleteVip(row) {
      vipCardDelete({
        id: row.id
      }).then(res => {
        console.log(res)
        this.getVipCardList()
      })
    },
    handleButton1Click(e) {
      // this.dialogManagementVisible = true
      console.log(e)
      this.userPhone = e
      this.dialogVisible = true
    },
    notesClick(e) {
      // this.dialogManagementVisible = true
      console.log(e)
      this.userPhoneNotes = e
      this.dialogVisibleNotes = true
    },
    cancellation() {
      this.dialogVisible = false
    },
    cancellationNotes() {
      this.dialogVisibleNotes = false
    },
    determine() {
      if (this.money == '') {
        this.$message({
          type: 'error',
          message: '填写数量不能为空!'
        })
        return
      }
      this.dialogVisible = false
      sendUserMoney({
        mobile: this.userPhone,
        score: this.money
      }).then(res => {
        this.getUserList()
        console.log(res)
      })
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleCloseNotes() {
      this.dialogVisibleNotes = false
    }
  }
}
</script>

<style>
.mian-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 80vh;
    font-size: 40px;
}

.tab {
    display: flex;
    align-items: center;
    margin: 30px 30px;
}

.tabSearch {
    display: flex;
}

.addBtn {
    margin-left: 30px;
    margin-bottom: 30px;
}

.ql-editor {

    height: 300px;

}

.filter-box {
    display: flex;
    align-items: center;

}
.filter-box>div {
    margin-left: 20px;
}
</style>
